<template>
  <div class="rankings">
    <ul class="nav">
      <li
        :class="key == item.id ? 'active' : ''"
        @click="currentSelect(item.id)"
        v-for="item of rankingList"
        :key="item.id"
      >
        <img :src="item.imgUrl" v-default-img="defaultImg" />
      </li>
    </ul>
    <main>
      <keep-alive>
        <router-view :key="key" />
      </keep-alive>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      defaultImg: require("@/assets/images/default-genres-cover.png"),
      rankingList: [], //榜单卡片信息
      // selected: "",
    };
  },
  components: {},
  computed: {
    key() {
      return this.$route.params.title;
      // return this.$route.name? this.$route.name+ +new Date() : this.$route+ +new Date()
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.getInfo();
  },
  methods: {
    // 获取榜单卡片信息
    async getInfo() {
      try {
        let res = await this.$api.home.info({});
        if (res.code === 1) {
          this.rankingList = res.source.rankingList;
          let active = this.$route.params.title;
          if (active === "null") {
            let id = this.rankingList[0].id + "";
            let params = Object.assign(this.$route.params, { title: id });
            this.$router.push({ params });
            // this.selected = id;
          }
          //  else {
          //   this.selected = this.$route.params.title;
          // }
        }
      } catch (e) {
        console.log(e);
      }
    },
    currentSelect(id) {
      // this.selected = id;
      let params = Object.assign(this.$route.params, { title: id });
      this.$router.push({ params });
    },
  },
};
</script>

<style lang="scss" scoped>
.rankings {
  padding: 40px;
  .nav {
    display: flex;
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom: 8px;
    > li {
      text-align: center;
      padding-bottom: 15px;
      &:not(:last-child) {
        margin-right: 35px;
      }
      &.active {
        border-bottom: 4px solid #f55651;
      }
      > img {
        width: 200px;
        height: 95px;
      }
    }
  }
  .mint-navbar {
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom: 12px;
    .mint-tab-item {
      padding: 0 0 15px;
      flex: 1 0 auto;
      &:not(:last-child) {
        margin-right: 35px;
      }
      &.is-selected {
        border-bottom: 4px solid #f55651;
      }
      div {
        width: 200px;
        height: 95px;
        //图片替换 ---------
        background: #aa88db;
        line-height: 95px;
        color: #fff;
        font-size: 26px;
        font-weight: bolder;
        font-family: PingFang-SC-Bold, PingFang-SC;
      }
      // &.is-selected{
      //   z-index: 1;
      // }
    }
  }
}
</style>
